<template>
	<view class="page fboxCol Ycenter">
		<view class="bg-fff" v-for="(item, index) in list" :key="index">
			<view class="pic-swipe" v-if="item.styleId == 'MODULE_STYLE_IMAGE1' && index == 0">
				<view class="img_box">
					<img class="pic img_bg" :src="imgUrl" alt="">
					<view class="img_box1">
						<scroll-view scroll-x="true" class="content-scroll" scroll-with-animation :scroll-left="scrollLeft">
							<view @click="changeTitle(sub,index)" class="scroll-item" v-for="(sub, index) in item.list" :key="index">
								<img class="min-pic" :src="sub.url" alt="" >
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- <van-swipe class="head-swipe" :autoplay="0" :initial-swipe="cIndex" indicator-color="white" :show-indicators="false" @change="swipeChange">
                    <van-swipe-item  v-for="(sub, index) in item.list" :key="index">

                        <van-image v-if="!isUrlType(sub)" class="pic" fit="cover" :src="sub" />
                        <video v-else class="pic" :src="sub" controls></video>
                    </van-swipe-item>
                </van-swipe> -->

				<!-- <u-tabs
					:list="item.list"
					keyName=" "
					:lineColor="`url(${item.list[0]}) 100% 100%`"
					lineWidth="20"
					lineHeight="20"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				>
				</u-tabs> -->
				<!-- <u-tab v-for="(sub, index) in item.list" :key="index"> -->
				<!-- <template #title> -->

				<!-- <u--image v-if="!isUrlType(sub)" class="min-pic" fit="cover" :src="sub" />
              <img v-else class="min-pic" fit="cover" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/bg-video.jpg" /> -->
				<!-- <van-image v-else class="min-pic" fit="cover" src="@/assets/image/bg-video.jpg" />
              <video v-else class="min-pic" :src="videoPic(sub)" @loadeddata="createPreImg($event)"></video> -->

				<!-- </template> -->

				<!-- <view slot="title">
                            <van-image v-if="!isUrlType(sub)" class="min-pic" fit="cover" :src="sub" />
                            <video v-else class="min-pic" :src="sub"></video>
                        </view> -->

				<!-- <u--image v-if="!isUrlType(sub)" class="pic" fit="cover" :src="sub" />
            <img v-else class="pic" fit="cover" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/bg-video.jpg" /> -->

				<!-- <view v-else class="pic">
              <video class="video" :src="videoPic(sub)" @loadeddata="createPreImg($event)"></video>
              <van-icon class="video-play" name="play" size="40" color="#f5f5f5" />
            </view> -->
				<!-- </u-tab> -->

				<!-- <view class="fboxRow min-list">
                    <van-tabs v-model="cIndex" line-width="0" scrollspy>
                        <van-tab  v-for="(sub, index) in item.list" :key="index">
                            <view slot="title">
                                <van-image v-if="!isUrlType(sub)" class="min-pic" fit="cover" :src="sub" />
                                <video v-else class="min-pic" :src="sub"></video>
                            </view>
                        </van-tab>                
                    </van-tabs>
                </view> -->
			</view>
			<view v-else class="box" :class="index == 1 ? 'first' : ''">
				<view class="hd fboxRow Ycenter">
					<!-- 每个模块的名称 -->
					<view class="flex1 font32">{{ item.name }}</view>
					<view class="more fboxRow Ycenter color-6264A3">
						<view style="font-size: 24rpx;">{{ item.styleId == 'MODULE_STYLE_TEXT1' ? '详情' : '更多' }}</view>
						<img class="arrow" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/right.png" alt="" />
					</view>
				</view>
				<view class="bd mt30 fboxCol Ycenter" v-if="item.styleId == 'MODULE_STYLE_TEXT1'"><view class="text font28 color-000233" v-html="item.content"></view></view>
				<view class="bd fboxWrap Ycenter pic1" v-if="item.styleId == 'MODULE_STYLE_COVER1'">
					<view class="item" v-for="(sub, i) in item.list.slice(0, 4)" :key="i">
						<!-- <u-image class="pic" fit="cover" :src="sub.cover" /> -->
						<img class="pic" style="object-fit: cover;" :src="sub.cover" alt="" srcset="" />
						<view class="title font24 color-fff font-ell1">{{ sub.title }}</view>
					</view>
				</view>
				<view class="bd fboxWrap Ycenter pic2" v-if="item.styleId == 'MODULE_STYLE_COVER2'">
					<view class="item" v-for="(sub, i) in item.list.slice(0, 6)" :key="i">
						<!-- <u-image class="pic" fit="cover" :src="sub.cover" /> -->
						<img class="pic" :src="sub.cover" alt="" srcset="" />
						<view class="title font24 color-fff font-ell1">{{ sub.title }}</view>
					</view>
				</view>
				<view class="bd mt30 company fboxCol Ycenter" v-if="item.styleId == 'MODULE_STYLE_ICON1'">
					<view class="item flex1 fboxRow Ycenter" v-for="(sub, i) in item.list" :key="i">
						<!-- <u-image class="logo" fit="cover" :src="sub.icon" /> -->
						<img class="logo" :src="sub.icon" alt="" srcset="" />
						<view class="flex1 line-b fboxRow Ycenter">
							<view class="fboxCol flex1">
								<view class="tit font32 color-000233 font-ell1">{{ sub.title }}</view>
								<view class="con font28 color-6264A3 font-ell1">{{ sub.introduce }}</view>
							</view>
							<view class="right"><img class="arrow" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/right.png" alt="" /></view>
						</view>
					</view>
				</view>
				<view class="bd mt30 swipe fboxCol Ycenter" v-if="item.styleId == 'MODULE_STYLE_IMAGE2' || item.styleId == 'MODULE_STYLE_IMAGE1'">
					<CitySwipe :list="item.list" />
				</view>
			</view>
			<view class="space"></view>
		</view>

		<DownloadBtn />
	</view>
</template>

<script>
// 接口
import { getCityDetails } from '@/api/h5.js';
import DownloadBtn from '@/components/download-btn-h5/download_btn.vue';
import CitySwipe from './city.swipe.vue';

export default {
	components: { DownloadBtn, CitySwipe },
	data() {
		return {
			cIndex: 0,
			id: '',
			list: [],
			imgUrl: '',
			bgVideo: "https://ebc-prod.cdn.benwunet.com/uni-static/h5/bg-video.jpg",
			contentScrollW: 0, // 导航区宽度
			curIndex: 0, // 当前选中
			scrollLeft: 0 // 横向滚动条位置

			// { img: '', title: '图片切换样式1', id: 'MODULE_STYLE_IMAGE1', type: '1' },
			// { img: '', title: '图片切换样式2', id: 'MODULE_STYLE_IMAGE2', type: '2' },
			// { img: '', title: '文字简介样式1', id: 'MODULE_STYLE_TEXT1', type: '3' },
			// { img: '', title: '封面标题列表样式1', id: 'MODULE_STYLE_COVER1', type: '4' },
			// { img: '', title: '封面标题列表样式2', id: 'MODULE_STYLE_COVER2', type: '5' },
			// { img: '', title: '图标标题列表样式1', id: 'MODULE_STYLE_ICON1', type: '6' }
		};
	},
	created() {
		this.getDetails();
	},
	mounted() {
		setTimeout(() => {
			this.getScrollW();
		}, 1000);
		// this.$nextTick(()=>{
			
		// })
	},
	methods: {
		getDetails() {
			const { id } = this.$route.query;
			getCityDetails({ areaDetailId: id }).then(res => {
				res.data.filter(item => {
					if (item.content && item.styleId !== 'MODULE_STYLE_TEXT1') {
						item.list = item.content ? JSON.parse(item.content) : [];
					}
				});
				this.list = res.data;
				if (this.list[0].list.length != 0) {
					this.list[0].list.forEach((item, index) => {
						if (this.isUrlType(item)) {
							// 如果不是图片 需要处理
							this.list[0].list[index] = { url: this.bgVideo, name: index };
						} else {
							this.list[0].list[index] = { url: item, name: index };
						}
					});
					this.imgUrl = this.list[0].list[0].url;
				}
			});
		},
		swipeChange(index) {
			this.cIndex = index;
		},
		// 获取区域宽度和每个子元素节点的宽度
		getScrollW() {
			const query = uni.createSelectorQuery();

			query
				.select('.content-scroll')
				.boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width;
				})
				.exec();

			query
				.selectAll('.scroll-item')
				.boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.list[0].list[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.list[0].list[i].width = data[i].width;
					}
				})
				.exec();
		},
		// 选中当前
		changeTitle(data,index) {
			this.curIndex = index;
			this.scrollLeft = this.list[0].list[index].left - this.contentScrollW / 2 + this.list[0].list[index].width / 2;
			this.imgUrl = data.url;
		},
		isUrlType(url) {
			if (url) {
				// 找到文件名最后一个.的位置
				const fileIndex = url.lastIndexOf('.'); // 14// 截取.之后的文件格式
				const substrName = url.substr(fileIndex); // jpg// 定义正则
				const format = /.(mp4)$/i;
				// 验证格式
				return format.test(substrName);
			} else {
				return false;
			}
		},
		videoPic(url) {
			console.log(this.createPreImg(url));
			return url;
		},
		createPreImg(url) {
			// event js原生事件
			const fileUrl = url;
			const videoElement = document.createElement('video');
			videoElement.preload = true;
			videoElement.autoplay = true;
			videoElement.muted = true;
			videoElement.src = fileUrl;
			const callBack = () => {
				const { videoWidth, videoHeight } = videoElement; // 获取video的宽高
				console.log({ videoWidth, videoHeight });

				const canvas = document.createElement('canvas');
				const scale = 0.8; // 压缩系数
				canvas.width = videoElement.videoWidth * scale;
				canvas.height = videoElement.videoHeight * scale;

				// canvas画图
				canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);

				// 把canvas转成base64编码格式
				const imgSrc = canvas.toDataURL('image/png');
				console.log(imgSrc);
				// const canvas = document.createElement('canvas')
				// canvas.width = videoWidth
				// canvas.height = videoHeight
				// const ctx = canvas.getContext('2d')
				// // ctx.fillStyle = "#000";
				// // ctx.fillRect(0, 0, imgWidth , imgHeight);
				// ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight)
				// const dataBase64 = canvas.toDataURL('image/png') // 完成base64图片的创建
				// console.log(dataBase64)
			};
			// videoElement.addEventListener('loadeddata', callBack);
			videoElement.oncanplay = callBack;
			//   videoElement.onloadeddata = setTimeout(() => {
			//     callBack()
			//   }, 1000)
		}
	}
};
</script>

<style scoped>
.content-scroll {
	white-space: nowrap;
}
.content-scroll .scroll-item {
	display: inline-block;
}
.tabs_p {
	position: relative;
	bottom: 200rpx;
}
.img_box {
	position: relative;
	overflow: hidden;
}
.img_box1 {
	position: absolute;
	display: flex;
	overflow: auto;
	bottom: 100rpx;
	width: 100%;
	transform: all 2s ease-in-out;
}
.img_box1 img {
	margin: 0 24rpx;
	flex-shrink: 0;
}
.head-swipe,
.head-swipe .pic {
	width: 750rpx;
	height: 688rpx;
}
.pic-swipe {
	position: relative;
	z-index: 0;
}
.pic-swipe .pic {
	height: 688rpx;
}
.pic-swipe .video {
	position: relative;
	z-index: 1;
	width: 750rpx;
	height: 688rpx;
}
.pic-swipe .video-play {
	position: absolute;
	top: 260rpx;
	left: 330rpx;
	z-index: 90;
}
.pic-swipe /deep/.van-tabs__wrap--scrollable .van-tabs__nav--complete {
	padding: 0;
}
.pic-swipe /deep/.van-tabs--line .van-tabs__wrap {
	height: auto;
}
.pic-swipe /deep/.van-tabs__nav {
	position: absolute;
	z-index: 90;
	top: 532rpx;
	width: 750rpx;
	height: 100rpx;
	overflow: hidden;
	overflow-x: auto;
}

.sub-swipe,
.sub-swipe .pic {
	width: 690rpx;
	height: 400rpx;
	background: #000233;
	border-radius: 12rpx;
}

.arrow {
	margin: 5rpx 0 0 10rpx;
	height: 22rpx;
}
.min-pic {
	width: 72rpx;
	height: 72rpx;
	background: #999999;
	border: 1rpx solid #c1c2de;
	border-radius: 12rpx;
	/* overflow: hidden; */
}
.min-list {
	position: absolute;
	top: 532rpx;
	width: 750rpx;
	overflow: hidden;
}
.min-list /deep/.van-tabs__nav {
	background: none;
}
.min-list /deep/.van-tab--active .min-pic {
	background: none;
	border-color: #fdcd3b;
}
.box {
	position: relative;
	/* width: 690rpx; */
	padding: 30rpx 30rpx 40rpx;
	z-index: 2;
	background-color: #fff;
	overflow: hidden;
}
.box.first {
	margin-top: -60rpx;
	padding: 60rpx 30rpx 40rpx;
	border-radius: 40rpx 40rpx 0 0;
	overflow: hidden;
}
/* .bg-fff + .bg-fff .box{margin-top: -60rpx; padding:60rpx 30rpx 40rpx; border-radius: 40rpx 40rpx 0 0;overflow: hidden;} */

.color-000233 {
	color: #000233;
}
.color-6264A3 {
	color: #6264a3;
}
.color-C1C2DE {
	color: #c1c2de;
}
.color-fff {
	color: #fff;
}
.mt30 {
	margin-top: 30rpx;
}
.text {
	line-height: 49rpx;
}
.space {
	width: 750rpx;
	height: 16rpx;
	background: #f0f1f5;
}
.pic {
	width: 100%;
	height: 100%;
}
.pic1 {
	margin-right: -30rpx;
}
.pic1 .item {
	position: relative;
	margin: 30rpx 30rpx 0 0;
	width: 330rpx;
	height: 180rpx;
	background: #000233;
	border-radius: 20rpx;
	overflow: hidden;
}
.pic1 .title {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 30rpx;
	width: 270rpx;
	height: 54rpx;
	line-height: 54rpx;
	text-align: center;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.pic2 {
	margin-right: -20rpx;
	padding-top: 10rpx;
}
.pic2 .item {
	position: relative;
	margin: 20rpx 20rpx 0 0;
	width: 216rpx;
	height: 216rpx;
	background: #000233;
	border-radius: 20rpx;
	overflow: hidden;
}
.pic2 .title {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 0 30rpx;
	height: 54rpx;
	line-height: 54rpx;
	text-align: center;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.company .item {
	width: 100%;
	height: 148rpx;
	overflow: hidden;
}
.company .logo {
	margin-right: 30rpx;
	width: 88rpx;
	height: 88rpx;
	background: #f5f5fa;
	border-radius: 28rpx;
	overflow: hidden;
}
.company .line-b {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f1f5;
}
.company .tit {
	width: 500rpx;
}
.company .con {
	margin-top: 20rpx;
	width: 500rpx;
}
</style>
